<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <#include "../common/header.ftl">
    <link rel="stylesheet" href="/js/plugins/treeview/bootstrap-treeview.css" type="text/css">
    <script type="text/javascript" src="/js/plugins/treeview/bootstrap-treeview.js"></script>

</head>
<body>

<div class="container " style="margin-top: 20px">
    <#include "../common/top.ftl"/>
    <div class="row">
        <div class="col-sm-3">
            <!--设置当前要回显当前菜单,必须在载人菜单前完成设置-->
            <#assign menu="region"/>
            <#include "../common/menu.ftl"/>
        </div>
        <div class="col-sm-9">
            <div class="row">
                <div class="col-sm-12">
                    <h1 class="page-head-line">旅游地区管理</h1>
                </div>
            </div>
            <!--高级查询--->
            <form class="form-inline" id="searchForm" action="/region/list.do" method="post">
                <input type="hidden" id="currentPage" name="currentPage" value="1">

            </form>
            <div class="col-sm-4">
                <div id="treeview"></div>
            </div>
            <div class="col-sm-8">
                <button type="button" id="regionBtn" class="btn btn-success">添加地区</button>
                <table class="table table-striped table-hover">
                    <tr>
                        <th>序号</th>
                        <th>名称</th>
                        <th colspan="2">操作</th>
                    </tr>
                    <tbody id="tbody"></tbody>
                </table>
            </div>

        </div>
    </div>
</div>

<div class="modal fade" id="inputModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">地区编辑</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" action="/region/saveOrUpdate.do" method="post" id="editForm">
                    <input type="hidden" name="id"/>
                    <input type="hidden" name="parentId"/>
                    <div class="form-group" >
                        <label class="col-lg-4 control-label">上一级地区：</label>
                        <div class="col-lg-6">
                            <input type="text" class="form-control" name="parentName" readonly/>
                        </div>
                    </div>
                    <div class="form-group" >
                        <label class="col-lg-4 control-label">地区名称：</label>
                        <div class="col-lg-6">
                            <input type="text" class="form-control" name="name" placeholder="请输入地区名称"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-lg-4 control-label">是否推荐：</label>
                        <div class="col-lg-6">
                            <select class="form-control" name="status">
                                <option value="0">否</option>
                                <option value="1">是</option>
                            </select>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary saveBtn">保存</button>
            </div>
        </div>
    </div>
</div>


<script>
    $.post("/region/selectByParentId.do", function (data) {
        $("#treeview").treeview({
            color: "#428bca",
            showTags: true,
            data: [{
                text: '全部地区',
                nodes: data
            }],
            lazyLoad:function (node) {
                $.get("/region/selectByParentId.do",{parentId:node.id},function (subData) {
                    $("#treeview").treeview("addNode",[subData,node]);
                })
            },
            onNodeSelected:function (event, node) {
                $.get("/region/selectByParentId.do",{parentId:node.id},function (subData){
                    var html="";
                    $.each(subData,function (index, ele) {
                        html+="<tr><td>"+(index+1)+"</td><td>"+ele.text+"</td><td><a href='javascript:;' class='editBtn' data-json='"+ele.json+"'>编辑</a></td></tr> ";
                    })
                    $("#tbody").html(html);
                })
            }
        });
    }, "json");

    $("#tbody").on("click",".editBtn",function () {
        $("#editForm").clearForm(true);
        var json = $(this).data("json");
        if(json){
            var parentNode = $("#treeview").treeview('getSelected')[0];
            $("#editForm input[name=id]").val(json.id);
            $("#editForm input[name=parentId]").val(json.parentId);
            $("#editForm input[name=name]").val(json.name);
            $("#editForm input[name=parentName]").val(parentNode.text);
            $("#editForm select[name=status]").val(json.status);
        }
        $("#inputModal").modal("show");
    })

    $(".saveBtn").click(function () {
        $("#editForm").ajaxSubmit(function (data) {
            if(data.success){
                location.reload();
            }
        })
    });

    $("#regionBtn").click(function () {
        $("#editForm").clearForm(true);
        var parentNode = $("#treeview").treeview('getSelected')[0];
        if(!parentNode){
            $.messager.alert("提示","请先选中一个地区");
            return;
        }
        $("#editForm input[name=parentName]").val(parentNode.text);
        $("#editForm input[name=parentId]").val(parentNode.id);
        $("#inputModal").modal("show");
    });
</script>
</body>
</html>